const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const svgToMiniDataURI = require('mini-svg-data-uri')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

const toml = require('toml');
// const yaml = require('yamljs');
const json5 = require('json5');

module.exports = {
    // 入口文件
    entry: './src/index.js',
    // 出口文件
    output: {
        filename: 'main.js',
        // 输出文件夹必须定义为绝对路径
        path: path.resolve(__dirname, 'dist'),
        // 打包前清理 dist 文件夹
        clean: true,
        // 将src/assets资源文件打包到dist下的images目录下
        // assetModuleFilename: 'images/[contenthash][ext][query]'
    },
    // 优化配置
	optimization: {
        minimizer: [
            // 压缩css
          new CssMinimizerPlugin(),
        ],
    },
    // 插件
    plugins: [
        // 抽离压缩css
        new MiniCssExtractPlugin({ 
            filename: 'css/[contenthash].css'
        }),
        // 实例化 html-webpack-plugin 插件
        new HTMLWebpackPlugin({
            // 打包生成的文件的模板
            template: './index.html',
            // 打包生成的文件名称。默认为index.html
            // filename: 'app.html',
            // 设置所有资源文件注入模板的位置,可以设置的值 true|'head'|'body'|false,默认值为 true
            inject: 'body',
            // 在目标的html页面中添加meta标签
            meta: {
                keywords: 'webpack, webpack5',
                author: '小千千-千锋教育HTML5大前端教研院'
            },
            // 压缩html文件，生产环境默认为true,其余默认为false
            // 如果设置了 mode , 则不需要主动设置
            // minify: true
        })
    ],
    // 开发模式 -- development, 生产模式 -- production, 不使用任何默认优化选项 -- none
    // mode: 'development',
    mode: 'production',
    // 在开发模式下追踪代码
    devtool: 'inline-source-map',
    // 实现实时重新加载
    devServer: {
        static: './dist'
    },
    // 配置资源文件
    module: {
        rules: [
            // resource 资源类型
            // {
            //     test: /\.png$/,
            //     // 发送一个单独的文件并导出URL
            //     type: 'asset/resource',
            //     // 优先级高于 assetModuleFilename
            //     generator: {
            //         filename: 'images/[contenthash][ext][query]'
            //     }
            // },
            // inline 资源类型
            // {
            //     test: /\.svg/,
            //     // 导出一个资源的 data URI。
            //     type: 'asset/inline',
            //     // 自定义函数模块
            //     generator: {
            //         dataUrl: content => {
            //           content = content.toString();
            //           return svgToMiniDataURI(content);
            //         }
            //     }
            // },

            // 通用资源类型
            {
                test: /\.(jpg|png|svg)$/,
                type: 'asset', // 通用资源类型 `asset` ,  在导出一个 data URI 和发送一个单独的文件之间自动选择。
                parser: {
                    dataUrlCondition: {
                        // 默认情况下，8kb为resource，生成图片，小于8KB，默认为base64
                        maxSize: 5 * 1024 // 5kb
                    }
                }
            },
            // source 资源类型
            {
                test: /\.txt$/,
                type: 'asset/source'
            },
            // 加载 css
            {
                test: /\.css$/,
                // use: ['style-loader', 'css-loader']
                use: [MiniCssExtractPlugin.loader, 'css-loader'] 
            },
            {
                test: /\.less$/i,
                // use: ['style-loader', 'css-loader', 'less-loader'],
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
            },
            {
                test: /\.scss$/i,
                // use: ['style-loader', 'css-loader', 'sass-loader'],
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
            },
            {
                test: /\.stylus$/i,
                // use: ['style-loader', 'css-loader', 'stylus-loader'],
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'stylus-loader'],
            },
            // 加载 fonts 字体
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
            },
            // 加载数据
            {
                test: /\.(csv|tsv)$/i,
                use: ['csv-loader'],
            },
            {
                test: /\.xml$/i,
                use: ['xml-loader'],
            },
            // 自定义Json 模块 parser
            {
                test: /\.toml$/i,
                type: 'json',
                parser: {
                  parse: toml.parse,
                },
              },
              {
                test: /\.json5$/i,
                type: 'json',
                parser: {
                  parse: json5.parse,
                },
              },
        ]
    },
    // WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
    // 配置
    performance: { 
        maxEntrypointSize: 10 * 1024 * 1024, // 10M
        maxAssetSize: 30 * 1024 * 1024 // 30M
    }
}